<template>
	<div class="shop-info-page">
		<van-nav-bar
		  title="商品详情"
			left-text="返回"
			 @click-left="handleLeftClick"
		/>
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
		  <van-swipe-item 
				v-for="item in pics" :key="item">
				<img class="shop-pics" :src="item" alt="">
			</van-swipe-item>
		  
		</van-swipe>
		<div class="goods-info">
		  <div class="title">
		    商品名称:{{addForm.name}}
		  </div>
		  <div class="description">
		    商品描述:{{addForm.description}}
		  </div>
		  <div class="description">
		    库存:{{addForm.count}}
		  </div>
			<div class="description">
			  销量:{{addForm.saleCount}}
			</div>
		  <div class="sale">
		    价格:
		      <span class="price-now">
		        {{addForm.price*addForm.discount/10}}
		      </span>/
		      <span class="price-old">
		        {{addForm.price}}
		      </span>
		  </div>
		</div>
		<img v-for="item in pics" class="shop-pics" :key="item+Math.random()" :src="item" alt="">
		
		<van-goods-action>
		  <van-goods-action-icon @click="handleToBuyCar" icon="cart-o" text="购物车" :badge="buyCarSize" />
		  <van-goods-action-button @click="handleStore" type="warning" text="加入购物车" />
		  <van-goods-action-button @click="handleBuyNow" type="danger" text="立即购买" />
		</van-goods-action>
	</div>
</template>

<script>
	import {findGoodsById} from '@/api/shop-api.js'
	import {addBuyCar,getBuyCarList} from '@/api/buy-car-api.js'
	export default{
		data(){
			return {
				addForm:{},
				pics:[],
				buyCarSize:0,
			}
		},
		async created() {
			let id = this.$route.query.id
			await this.findGoodsById(id)
			await this.getBuyCarList()
			if(this.addForm.pics){
				this.pics = this.addForm.pics.split(',')
			}
		},
		methods:{
			handleLeftClick(){
				this.$router.history.go(-1)
				
			},
			async getBuyCarList(){
				let userInfo = JSON.parse(sessionStorage.userInfo)
				let res = await getBuyCarList({id:userInfo.id,isDeal:0})
				if(res.data.code == 200){
					this.buyCarSize = res.data.data.list.length;
				}
			},
			async findGoodsById(id){
				let res = await findGoodsById(id)
				if(res.data.code == 200){
					this.addForm = res.data.data
				}
			},
			handleToBuyCar(){
				console.log('购物车')
				this.$router.push("/user-buy-car")
			},
			async handleStore(){
				console.log('加入购物车')
				let r = await this.$dialog.confirm({
					title:'提示',
					message:'正在添加购物车，确认继续'
				}).catch(err => err)
				if(r == 'confirm'){
					let res = await addBuyCar({goodsId:this.addForm.id})
					if(res.data.code == 200){
						this.$notify({type:'success',message:res.data.msg})
					}
					await this.getBuyCarList()
				}
			},
			handleBuyNow(){
				console.log('购买')
				this.$router.push({name:'shop-order',params:{formData:this.addForm}})
			}
		}
	}
</script>

<style  lang="scss">
	
	.shop-info-page{
	  padding-bottom: 50px;
		background-color: #eee;
		.shop-pics{
			width: 100%;
			height: 200px;
			object-fit: contain;
			background-color: #000;
		}
	  .goods-info{
	    background-color: #fff;
	    padding: 5px 10px;
	    .title{
	      font-size: 20px;
	      font-weight: bold;
	      line-height: 40px;
	    }
	    .description{
	      color:#666;
	      font-size: 14px;
	      line-height: 20px;
	    }
	    .sale{
	      text-align: right;
	      .price-now{
	        color:red;
	        font-size: 20px;
	        font-weight: bold;
	      }
	      .price-old{
	        color:#aaa;
	        font-size: 12px;
	        font-weight: bold;
	        text-decoration: line-through;
	      }
	    }
	  }
	}
	
</style>
